<template>
	<view>
		<view class="content">
			<uni-list v-for="(item,index) in worker"
			:key="index">
				<uni-section 
				type="line" 
				:title="item.employeeStatus == 'TEAM' ? employeeStatus.team : (item.employeeStatus == 'PROJECT' ? employeeStatus.project : employeeStatus.normal)" />
				<uni-collapse>
					<text class="tips" v-if="item.employees.length <= 0">暂无员工</text>
					<uni-collapse-item 
					:open="true"
					:title="subItem.team != null ? subItem.team.name : (subItem.project != null ? subItem.project.name : '自由员工')" 
					:show-animation="true" 
					style="margin-left: 20rpx;"
					v-for="(subItem, subIndex) in item.employees" 
					v-if="item.employees.length > 0"
					:key="subIndex">
						<uni-swipe-action>
							<uni-swipe-action-item v-for="employees in subItem.employee" 
							:key="employees.id" 
							:right-options="options"
							:auto-close="true" 
							@change="change" 
							@click="bindClick($event,employees)">
								<uni-list-item 
								:key="employees.id" 
								:title="employees.realName == null ? employees.nickName : employees.realName"
								:thumb="employees.avatar == '' ? defaultAvatar : employees.avatar"
								:note="employees.phone == null ? '' : employees.phone" />
							</uni-swipe-action-item>
						</uni-swipe-action>
					</uni-collapse-item>
					<text v-else>暂无员工</text>
				</uni-collapse>
			</uni-list>
<!-- 			<button type="default"
				style="margin: 30rpx auto;background-color: #007AFF;color: #fff; align-items: center;"
				@click="add">点击添加一条员工记录</button>
 -->		<view>
				<xy-dialog 
				:title="isEdit == true ? '修改员工信息' : '新增员工信息'" 
				ref="dialog"
				:show.sync="showDialog"
				@cancelButton="clickCancel()" 
				@confirmButton="submit()">
					<view style="padding: 0 30upx 30upx;">
						<uni-forms ref="addOrUpdateForm" labelAlign="right" :modelValue="employee" rules="rules">
							<uni-forms-item label="名称:" required name="realName">
								<uni-easyinput v-model="employee.realName" placeholder="请输入名称" />
							</uni-forms-item>
							<uni-forms-item label="手机:" required name="phone">
								<uni-easyinput v-model="employee.phone" placeholder="请输入手机" />
							</uni-forms-item>
							<uni-forms-item label="员工类型:">
								<uni-data-checkbox 
								v-model="employee.employeeStatus" 
								:localdata="status" 
								@change="changeStatus"
								/>
							</uni-forms-item>
							<uni-forms-item label="团队:" v-if="employee.employeeStatus == 'TEAM'">
								<uni-data-picker 
								placeholder="请选择团队" 
								:localdata="team" 
								v-model="employee.teamId" />
							</uni-forms-item>
							<uni-forms-item label="项目:" v-if="employee.employeeStatus == 'PROJECT'">
								<uni-data-picker 
								placeholder="请选择项目" 
								:localdata="project" 
								v-model="employee.projectId" />
							</uni-forms-item>
							<uni-forms-item label="薪酬类别:">
								<uni-data-checkbox v-model="employee.salaryStatus" :localdata="salaryStatus" />
							</uni-forms-item>
							<uni-forms-item label="薪酬:" required name="salary">
								<uni-easyinput v-model="employee.salary" placeholder="请输入薪酬" />
							</uni-forms-item>
						</uni-forms>
						<button id="submit-button" type="default" :plain="true" @click="submit()"></button>
					</view>
				</xy-dialog>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultAvatar: '/static/defaultAvatar.png',
				employeeStatus:{
					team: '团队员工',
					project: '项目员工',
					normal: '自由员工'
				},
				status: [{
					text: '普通员工',
					value: 'NORMAL'
				},{
					text: '团队',
					value: 'TEAM'
				},{
					text: '项目',
					value: 'PROJECT'
				}],
				isEdit: false,
				isLogin: false,
				showDialog: false,
				worker: [],
				team: [],
				project: [],
				employee: {
					id: '',
					realName: '',
					phone: '',
					teamId: '',
					projectId: '',
					employeeStatus: 'NORMAL',
					salaryStatus: 'DAY',
					salary: ''
				},
				salaryStatus: [
					{
						text: '日薪',
						value: 'DAY'
					},
					{
						text: '月薪',
						value: 'MONTH'
					},
					{
						text: '年薪',
						value: 'YEAR'
					}
				],
				options: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				rules: {
					realName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							format: 'phoneno',
							errorMessage: '手机号格式错误'
						}]
					},
					salary: {
						rules: [{
							required: true,
							errorMessage: '请输入薪酬'
						}]
					},
				},
			}
		},
		onLoad() {
			this.getTeams();
			this.getProjects();
		},
		onShow() {
			this.isLogin = this.$dry.isLogin();
			if (!this.isLogin) {
				uni.showModal({
					title: "信息",
					content: "需要登录后查看，去登录",
					showCancel: false,
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							uni.switchTab({
								url: '../user/user',
							})
						}
					}
				});
			} else {
				this.getEmployee();
			}
		},
		watch: {
			isEdit(val){
				if(val === true) {
					this.$nextTick(() => {
						this.$refs.addOrUpdateForm.setRules(this.rules);
					})
				}
			}
		},
		// onReady() {
		// 	// 需要在onReady中设置规则
		// 	this.$refs.addOrUpdateForm.setRules(this.rules);
		// },
		onPullDownRefresh() {
			// console.log('onPullDownRefresh');
			this.getEmployee();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '大家都在用这款小工具管理项目，快来试试吧！！！',
				path: '/pages/index/index'
			}
		},
		methods: {
			async getTeams() {
				var list = await this.$dry.getTeams(true);
				var team = [{
					text: "请选择团队",
					value: ''
				}];
				list.forEach(e => {
					team.push({
						text: e.name,
						value: e.id
					})
				})
				this.team = team;
				
			},
			getProjects() {
				var token = this.$dry.getToken();
				var data = [];
				if (token) {
					data = this.$request.run("queryProjectsByOwner",token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {
							isCreator: false
						},
						success: data => {
							var projectList = data.data;
							if(projectList.length != 0) {
								var newList = [{
									text: "请选择项目",
									value: ''
								}]
								projectList.forEach(p => {
									newList.push({
										text: p.name,
										value: p.id,
									});
								});
								this.project = newList;
							}
							else{
								this.project = [];
							}
						}
					})
				}
			},
			getEmployee() {
				var token = this.$dry.getToken();
				if (token) {
					var data = this.$request.run("listEmployeeByStatus", token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {},
						success: data => {
							this.worker = data.data;
						},
						fail: (data, code) => {
							console.log('fail' + JSON.stringify(data));
						}
					})
				}
			},
			clickCancel() {
				this[`showDialog`] = false;
				this.isEdit = false;
			},
			bindClick(e, data) {
				if (e.index == 0) {
					this.employee.id = data.id,
					this.employee.realName = data.realName;
					this.employee.phone = data.phone;
					this.employee.employeeStatus = data.employeeStatus;
					this.employee.teamId = data.teamId;
					this.employee.projectId = data.projectId;
					this.employee.salaryStatus = data.salaryStatus;
					this.employee.salary = data.salary;
					this[`showDialog`] = true;
					this.isEdit = true;
					//this.$refs.inputDialog.open();
				} else {
					uni.showModal({
						title: "信息",
						content: "确定要删除" + data.realName + "吗",
						showCancel: true,
						confirmText: "确定",
						success: function(res) {
							if (res.confirm) {
								that.delWorker(data.id);
							} else if (res.cancel) {
								// uni.navigateTo({
								// 	url: '/pages/user/get-phone'
								// })
							}
						}
					});
				}
			},
			submit() {
				this.$refs['addOrUpdateForm'].validate().then(res => {
					this[`showDialog`] = false;
					if(this.isEdit) {
						uni.showLoading({
							title: '正在更新...'
						});
					} else {
						uni.showLoading({
							title: '正在添加...'
						});
					}
					this.addOrUpdateEmployee();
					setTimeout(() => {
						uni.hideLoading();
						this.getEmployee();
					}, 2000)
				}).catch(err => {
					uni.showToast({
						title: "操作失败"
					})
				})
			},
			add() {
				this[`showDialog`] = true;
			},
			addOrUpdateEmployee() {
				var token = this.$dry.getToken();
				var data = {};
				if (token) {
					if(this.isEdit) {
						data = this.$request.run("updateEmployee", token);
					} else {
						data = this.$request.run("addEmployee", token);
					}
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: this.employee,
						success: data => {
							if(data.statusCode === 200) {
								if(this.isEdit) {
									uni.showToast({
										title: "修改成功！",
										duration: 1000
									});
									this.isEdit = false;
								} else {
									uni.showToast({
										title: "添加成功！",
										duration: 1000
									});
								}
								this.getEmployee();
							}
						}
					})
				}
			},
			delWorker(id) {
				var token = this.$dry.getToken();
				if (token) {
					var data = this.$request.run("deleteEmployeeById", token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {
							"id": id
						},
						success: data => {
							if (data.statusCode == 200 && data.data.code == 0) {
								uni.showToast({
									title: "删除成功",
									duration: 1000
								})
								this.getEmployee();
							}
						}
					})
				}
			},
			change(e) {
				this.isOpen = e;
				// console.log('返回：', e);
			},
			changeStatus() {
				if(this.employee.employeeStatus == 'TEAM') {
					this.employee.projectId = '';
				}
				if (this.employee.employeeStatus == 'PROJECT') {
					this.employee.teamId = '';
				}
				if(this.employee.employeeStatus == 'NORMAL') {
					this.employee.projectId = '';
					this.employee.teamId = '';
				}
			}
		}
	}
</script>

<style scoped>
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.del-button {
		margin-top: -80rpx;
	}

	#submit-button {
		width: 50%;
		height: 100rpx;
		margin-bottom: -120rpx;
		margin-right: -30rpx;
		border: none;
		outline: none;
		z-index: 100;
	}
	.tips{
		padding:10rpx 20rpx;
		text-align: left;
		font-size: 24rpx;
		color: #0077AA;
	}
</style>
